<template>
	<div style="border: 1px solid #ccc">
		<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
		<Editor style="height: 300px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
	</div>

	<div style="margin-top: 10px; display: flex; justify-content: flex-end">
		<el-button @click="handleClose">关闭</el-button>
		<el-button type="primary" @click="submit">提交</el-button>
	</div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { onBeforeUnmount, ref, shallowRef, watch, onBeforeMount } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { Session } from '/@/utils/storage';
import { ElMessage } from 'element-plus';

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
// 内容 HTML
const valueHtml = ref('');

const props = defineProps({
	// 列表内容
	content: {
		type: String,
		default: () => '',
	},
	disabled: {
		type: Boolean,
		default: () => false,
	},
});
const toolbarConfig = {};
const editorConfig = { placeholder: '请编辑协议内容', MENU_CONF: {} };

watch(
	() => props.content,
	(val) => {
		if (val) {
			valueHtml.value = JSON.parse(JSON.stringify(props.content));
		}
	}
);

onBeforeMount(() => {
	editorConfig.MENU_CONF['uploadImage'] = {
		server: import.meta.env.VITE_API_URL + 'common/upload',
		// form-data fieldName ，默认值 'wangeditor-uploaded-image'
		fieldName: 'file',
		// 单个文件的最大体积限制，默认为 2M
		maxFileSize: 1 * 1024 * 1024, // 1M
		// 最多可上传几个文件，默认为 100
		maxNumberOfFiles: 10,
		// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
		allowedFileTypes: ['image/*'],
		// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
		meta: {
			fileCode: 'IMG',
		},
		// 将 meta 拼接到 url 参数中，默认 false
		metaWithUrl: false,
		// 自定义增加 http  header
		headers: {
			'auth-token': `${Session.get('token')}`,
		},
		// 跨域是否传递 cookie ，默认为 false
		withCredentials: false,
		// 超时时间，默认为 10 秒
		timeout: 5 * 1000, // 5 秒
		// 自定义上传
		// 自定义插入图片
		customInsert(res: any, insertFn: InsertFnType) {
			console.log('🚀 ~ file: index.vue:59 ~ res:', res);
			// TS 语法
			// customInsert(res, insertFn) {                  // JS 语法
			// res 即服务端的返回结果

			// 从 res 中找到 url alt href ，然后插入图片
			if (res.code == 200) {
				insertFn(res.data.fileUrl, '', '');
			} else {
				ElMessage.error('上传失败');
			}
		},
	};
});

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
	const editor = editorRef.value;
	if (editor == null) return;
	editor.destroy();
});

const handleCreated = (editor) => {
	editorRef.value = editor; // 记录 editor 实例，重要！
	if (props.disabled) editorRef.value.disable();
};

const emit = defineEmits(['handleClose', 'submit']);

function handleClose() {
	emit('handleClose');
}

function submit() {
	emit('submit', valueHtml.value);
}
</script>

<style></style>
